<template>
  <div class="my_center">
    <Header></Header>
    <div class="my_center_main">
      <div class="center_top">
        <div class="portrait">
          <img src="../assets/img/logo.png" alt="" />
        </div>
        <div class="usermes">
          <h3>
            {{ user.nickname
            }}<el-button
              type="primary"
              style="float: right"
              icon="el-icon-upload"
              @click="createCenter"
              >发布创作</el-button
            >
          </h3>
          <input
            type="text"
            name=""
            id=""
            placeholder="请编写个性签名"
            v-model="user.int"
          />
        </div>
      </div>
      <div class="center_main">
        <div class="left">
          <ul>
            <li><i>姓名：</i>{{ user.name }}</li>
            <li><i>性别：</i>{{ user.sex}}</li>
            <li><i>学校：</i>{{ user.school }}</li>
            <li><i>地址：</i>{{ user.site }}</li>
            <li><i>电话：</i>{{ user.phone }}</li>
            <li><i>邮箱：</i>{{ user.eMail }}</li>
          </ul>
          <div class="left_btn">
            <el-button type="success" round plain @click="openUpUserMes"
              >修改信息</el-button
            >
            <el-button type="danger" round plain @click="openChangePassword">修改密码</el-button>
          </div>
        </div>
        <div class="right">
          <div class="myplan clear">
            <h3><i class="el-icon-s-promotion"></i> 我的目标</h3>
            <ul>
              <li>
                <i>我的专业：</i
                ><input
                  type="text"
                  :disabled="amendmaplan"
                  v-model="myplan.plan_major"
                />
              </li>
              <li>
                <i>目标学校：</i
                ><input
                  type="text"
                  :disabled="amendmaplan"
                  v-model="myplan.plan_school"
                />
              </li>
              <li>
                <i>考研时间：</i
                ><input
                  type="text"
                  :disabled="amendmaplan"
                  v-model="myplan.plan_time"
                />
              </li>
            </ul>
            <el-button
              class="btn"
              type="primary"
              size="small"
              icon="el-icon-edit"
              v-if="amendmaplan"
              @click="amendMyPlan"
              >修改目标</el-button
            >
            <el-button
              class="btn"
              type="primary"
              size="small"
              icon="el-icon-edit"
              v-if="!amendmaplan"
              @click="upAmendMyPlan"
              >确定</el-button
            >
          </div>
          <div class="myColl clear">
            <h3><i class="el-icon-s-claim"></i> 我收藏的文章</h3>
            <ul class="myCollcard">
              <Card
                v-for="ifem in article"
                :key="ifem.id"
                :liData="ifem"
              ></Card>
            </ul>
            <el-button
              class="btn"
              type="primary"
              size="small"
              icon="el-icon-share"
              @click="moreMycoll"
              >更多</el-button
            >
          </div>
          <div class="myColl clear">
            <h3><i class="el-icon-video-camera-solid"></i> 我收藏的视频</h3>
            <ul class="myCollvideo">
              <VideoCard
                v-for="ifem in video"
                :key="ifem.id"
                :liData="ifem"
              ></VideoCard>
            </ul>
            <el-button
              class="btn"
              type="primary"
              size="small"
              icon="el-icon-share"
              @click="moreMycoll"
              >更多</el-button
            >
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="修改信息" :visible.sync="usermesVisible">
      <el-form :model="user">
        <el-form-item label="昵称：">
          <el-input v-model="user.nickname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="姓名：">
          <el-input v-model="user.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别：">
          <el-input v-model="user.sex" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="学校：">
          <el-input v-model="user.school" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址：">
          <el-input v-model="user.site" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话：">
          <el-input v-model="user.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱：">
          <el-input v-model="user.eMail" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelUpUserMes">取 消</el-button>
        <el-button type="primary" @click="upUserMes">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="修改密码" :visible.sync="changePassword">
      <el-form
        :model="ruleForm2"
        status-icon
        :rules="rules2"
        ref="ruleForm2"
        class="demo-ruleForm"
      >
        <el-form-item label="旧密码" prop="oldPass">
          <el-input
            type="text"
            v-model="ruleForm2.oldPass"
            autocomplete="off"
            placeholder="输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="pass">
          <el-input
            type="password"
            v-model="ruleForm2.pass"
            auto-complete="off"
            placeholder="输入新密码"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input
            type="password"
            v-model="ruleForm2.checkPass"
            auto-complete="off"
            placeholder="确认密码"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeChangePassword">取 消</el-button>
        <el-button type="primary" @click="submitChangePassword('ruleForm2')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Header from "../components/Header.vue";
import Card from "../components/Card.vue";
import VideoCard from "../components/VideoCard.vue";
import axios from 'axios';
export default {
  data() {
    //  <!--旧密码是否为空-->
    let checkSmscode = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    // <!--验证密码-->
    let validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else if (value.length < 6 || value.length > 12) {
        callback(new Error("密码为6-12位字符"));
      } else {
        if (this.ruleForm2.checkPass !== "") {
          this.$refs.ruleForm2.validateField("checkPass");
        }
        callback();
      }
    };
    // <!--二次验证密码-->
    let validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm2.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      user: {},
      myplan: {},
      article: {},
      video: {},
      amendmaplan: true,
      usermesVisible: false,
      changePassword: false,
      ruleForm2: {
        pass: "",
        checkPass: "",
        oldPass: "",
      },
      rules2: {
        pass: [{ validator: validatePass, trigger: "change" }],
        checkPass: [{ validator: validatePass2, trigger: "change" }],
        oldPass: [{ validator: checkSmscode, trigger: "change" }],
      },
    };
  },
  name: "mycenter",
  components: { Header, Card, VideoCard },
  mounted() {
    this.getuserData();
  },
  methods: {
    // 用户信息初始化
    getuserData() {
      var user_id = JSON.parse(localStorage.getItem("token")).u_id;
      
      axios.post(`http://localhost:3000/myCenter/getMyData`,{
        id:user_id
      }).then((ret) => {
        ret.data.article.forEach(e => {
          e.collect=1
        });
        this.user=ret.data.userData
        this.myplan.plan_major = this.user.plan_major;
      this.myplan.plan_school = this.user.plan_school;
      this.myplan.plan_time = this.user.plan_time;
        this.article= ret.data.article.reverse()
        this.video= ret.data.video.reverse()
      })
    },
    // 修改信息按钮
    openUpUserMes() {
      this.usermesVisible = true;
    },
    // 取消修改信息
    cancelUpUserMes() {
      this.$message({
        showClose: true,
        message: "信息无任何修改！",
        type: "warning",
      });
      this.usermesVisible = false;
    },
    // 确认修改信息
    upUserMes() {
      axios
        .post(`http://localhost:3000/myCenter/changeInf`, {
          u_id: this.user.u_id,
          userData: this.user,
        })
        .then((ret) => {
          if (ret.data.code == 1) {
            this.$message({
              showClose: true,
              message: "修改成功！！",
              type: "success",
            });
            this.usermesVisible = false;
          }
        });
    },
    // 修改目标
    amendMyPlan() {
      this.amendmaplan = false;
    },
    // 提交目标
    upAmendMyPlan() {
      axios
        .post(`http://localhost:3000/myCenter/changePlan`, {
          u_id: this.user.u_id,
          plan: this.myplan,
        })
        .then((ret) => {
          if (ret.data.code == 1) {
            this.$message({
              showClose: true,
              message: "修改成功！！",
              type: "success",
            });
            this.amendmaplan = true;
          }
        });
      
    },
    // 更多收藏按钮
    moreMycoll() {
      this.$router.push({ path: "/Collect" });
    },
    // 修改密码
    openChangePassword() {
      this.changePassword = true;
    },
    // 取消修改密码
    closeChangePassword() {
      this.ruleForm2 = {
        pass: "",
        checkPass: "",
        oldPass: "",
      };
      this.changePassword = false;
    },
    // 确认修改密码
    submitChangePassword(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          axios
            .post(`http://localhost:3000/myCenter/changePassword`, {
              u_id: this.user.u_id,
              new_password: this.ruleForm2.checkPass,
              old_password: this.ruleForm2.oldPass,
            })
            .then((ret) => {
              if (ret.data.code == 1) {
                this.$message({
                  showClose: true,
                  message: "修改成功！！",
                  type: "success",
                });
                this.closeChangePassword();
              } else {
                this.$message({
                  showClose: true,
                  message: "旧密码不匹配！！",
                  type: "warning",
                });
              }
            });
        } else {
          this.$message({
            showClose: true,
            message: "填写有误请检查后再提交！",
            type: "error",
          });
          return false;
        }
      });
    },
    //创作中心按钮
    createCenter(){
      this.$router.push({ path: "/Create" });
    }
  },
};
</script>

<style scoped>
.my_center_main {
  width: 80%;
  margin: auto;
}
.center_top {
  height: 200px;
  display: flex;
  padding: 120px 0 0 20px;
  box-sizing: border-box;
  background: url(../../public/header.png) no-repeat;
  background-size: 100% 100%;
}
.center_top div.portrait {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  background-color: #fff;
  border: 1px solid white;
}
.usermes {
  width: 90%;
  padding: 0px 20px;
}
.usermes h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 5px;
  color: #303133;
}
.usermes input {
  width: 400px;
  height: 20px;
  font-size: 14px;
  color: #606266;
  cursor: pointer;
  border: 0;
  transition: 0.3s;
  background-color: rgba(0, 0, 0, 0);
}
.usermes input:focus {
  border: 1px solid rgba(255, 255, 255, 0.7);
  background-color: rgba(255, 255, 255, 0.5);
}
.center_main {
  display: flex;
  position: relative;
  justify-content: space-between;
  padding: 10px;
  background-color: #f1f1f1;
}
.left {
  width: 260px;
  height: 500px;
  padding: 20px;
  position: sticky;
  top: 80px;
  background-color: #fff;
}
.left li {
  padding: 20px 10px;
}
.left_btn {
  margin: 20px;
}
.el-form-item {
  display: flex;
}
.right {
  width: 75%;
  overflow-y: scroll;
}
.right div {
  background-color: #fff;
  margin-bottom: 20px;
}
.right div {
  padding: 10px;
}
.right div h3 {
  width: 200px;
  margin-left: 20px;
  margin-bottom: 20px;
  padding: 10px 20px;
  font-size: 20px;
  font-weight: 700;
  color: #409eff;
  border-bottom: 2px solid #409eff;
}
.myplan ul {
  display: flex;
  justify-content: space-around;
  padding: 10px 20px;
}
.myplan ul input {
  border: 0;
  font-size: 16px;
  color: #606266;
}
.myplan ul input:focus {
  border: 1px solid #409eff;
}
.myplan .btn {
  float: right;
}
.myColl {
  padding: 10px 0;
}
.myColl ul {
  display: flex;
  flex-wrap: wrap;
}
.myCollcard li {
  margin: 10px;
}
.myCollcard li:nth-of-type(3n){
  margin-right: 0;
}
.myCollvideo li {
  margin: 10px 20px;
}
</style>
